<template>
  <div class="audio">
    <div class="top">
      <lunbo :pro="bannerdata.banners"></lunbo>
    </div>
    <div class="content">
      

      <div class="content-box">
        <div class="book-box" v-for="(item, index) in contentData" :key="index">
          <van-cell v-if="item.module == 52">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">{{ item.name }}</span>
            </template>
            <template #label>
              <div v-for="(v1, i1) in item.list" :key="i1">
                <div class="content-item" v-if="i1 == 0">
                  <img class="thumb" :src="v1.cover" alt="" />
                  <div class="label-right">
                    <span class="title">{{ v1.title }}</span>
                    <div class="author">
                      <span>{{ v1.author + "/" + v1.category }}</span>
                    </div>
                    <p class="test-desc">{{ v1.content }}</p>
                  </div>
                </div>

                <div class="content-item2" v-else>
                  <div class="content-item2-x">
                    <img class="thumb2" :src="v1.cover" alt="" />
                    <div class="bottom">
                      <div class="title-smart">{{ v1.title }}</div>
                      <div class="author-bottom">{{ v1.author }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </van-cell>

          <div>
            <van-cell v-if="item.module == 34">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">{{ item.name }}</span>
              </template>
              <template #label>
                <div v-for="(v2, i2) in item.list" :key="i2">
                  <div class="content-item3">
                    <div class="content-item3-x">
                      <img class="thumb3" :src="v2.cover" alt="" />
                      <div class="bottom">
                        <div class="title-smart2">{{ v2.title }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btn-to">
                  查看榜单
                  <van-icon name="arrow" />
                </div>
              </template>
            </van-cell>
          </div>

          <div>
            <van-cell v-if="item.module == 36">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">{{ item.name }}</span>
              </template>
              <template #label>
                <div v-for="(v3, i3) in item.list" :key="i3">
                  <div class="content-item">
                    <img class="thumb" :src="v3.cover" alt="" />
                    <div class="label-right">
                      <span class="title">{{ v3.title }}</span>
                      <div class="author">
                        <span>{{ v3.author + "/" + v3.category }}</span>
                      </div>
                      <p class="test-desc2">{{ v3.content }}</p>
                    </div>
                  </div>
                </div>
              </template>
            </van-cell>
          </div>

          <div>
            <van-cell v-if="item.module == 58">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">{{ item.name }}</span>
              </template>
              <template #label>
                <div class="flex-box">
                  <div v-for="(v2, i2) in item.list" :key="i2">
                    <div class="book-img">
                      <img class="thumb4" :src="v2.cover" alt="" />
                    </div>
                    <div class="book-title">{{ v2.title }}</div>
                    <div class="book-author">{{ v2.author }}</div>
                  </div>
                </div>
              </template>
            </van-cell>
          </div>

          <div>
            <van-cell v-if="item.module == 46">
              <!-- 使用 title 插槽来自定义标题 -->
              <img class="bannerImg" :src="item.cover" alt="" />
            </van-cell>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lunbo from "../../components/lunbo.vue";
export default {
  name: "audio1",
  data() {
    return {
      bannerdata: [],
      canshu: {},
      contentData: [],
    };
  },
  components: {
    lunbo,
  },
  created() {
    this.canshu = this.$route.params;
    this.getContent();
  },
  methods: {
    getContent() {
      this.axios({
        method: "get",
        url: `/store/show.json?type=audio&uuid=b67282bb443845fabe5b543795a27618`,
      })
        .then((result) => {
          // console.log(result);
          this.bannerdata = result.data.data.list[0];
          this.contentData = result.data.data.list.slice(1);

          // console.log(this.contentData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.van-cell {
  margin-bottom: 5px;
  border-bottom: 1px solid #f5f5f5;
}
.content {
  background-color: #fff;
}
.content-item1 {
  padding: 0px 10px;
}
/deep/.van-grid-item__content--center {
  padding: 5px 0px;
  // background-color: red;
}
.thumb {
  width: 80px;
  height: 100px;
  background-color: #f8f8f8;
}
.thumb2 {
  width: 70px;
  height: 90px;
  background-color: #f8f8f8;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
  font-size: 17px;
  color: #000;
}
/deep/.test-desc {
  // background-color: red;
  width: 250px;
  height: 50px;
  // white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 10px;
}
.content-item {
  display: flex;
}
.content-item2 {
  margin-top: 5px;
  //   background-color: red;
  display: inline-block;
  float: left;
  height: 150px;
  .content-item2-x {
    margin-right: 5px;
    // justify-content: space-between;
  }
  .title-smart {
    width: 80px;
    font-size: 13.5px;
    color: #000;
    word-break: break-all;
  }
  .author-bottom {
    font-size: 10px;
  }
}
.label-right {
  margin-left: 5px;
  .title {
    font-size: 14.5px;
    width: 240px;
    color: #000;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.title-smart {
  width: 80px;
  font-size: 13.5px;
  color: #000;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.author-bottom {
  width: 80px;
  font-size: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

//出版的图片样式
.bannerImg {
  width: 365px;
  height: 100px;
  background-size: cover;
}

//34的公共样式
.content-item3 {
  margin-top: 5px;
  //   background-color: red;
  display: inline-block;
  float: left;
  height: 150px;
  .content-item3-x {
    margin-right: 14px;
    padding-bottom: 30px;
    // justify-content: space-between;
  }
  .title-smart2 {
    width: 80px;
    font-size: 12px;
    color: #000;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/deep/.btn-to {
  position: absolute;
  top: 190px;
  left: 150px;
  // text-align: center;
  // margin: 0 auto;
  // background-color: red;
}
.thumb3 {
  width: 100px;
  height: 120px;
  background-color: #f8f8f8;
}
//58的公共样式
.thumb4 {
  width: 70px;
  height: 90px;
  background-color: #f8f8f8;
}
.author {
  display: flex;
  justify-content: space-between;
}
.content-item {
  display: flex;
  margin-top: 7px;
  //书的描述信息(右边)
  .label-right {
    margin-left: 5px;
    .author {
      margin-top: 5px;
    }
    .title {
      font-size: 15px;
      color: #000;
    }
  }
}
/deep/.test-desc2 {
  width: 250px;
  height: 35px;
  // white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
}
.book-title {
  width: 80px;
  font-size: 10px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
}
/deep/.book-author {
  font-size: 10px;
  width: 80px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flex-box {
  display: flex;
}

.book-img-title {
  display: flex;
}
.book-desr {
  margin-left: 5px;
}
.book-name {
  width: 80px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #000;
}
.book-type {
  margin-top: 5px;
}
.flex-container {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
.flex-item {
  margin-right: 15px;
  margin-bottom: 10px;
}
</style>